// composables/useKeyboard.ts
import { onMounted, onBeforeUnmount } from 'vue';

type Callback = (event: KeyboardEvent) => void;

export function useKeyboard(key: string, callback: Callback) {
  const handler = (event: KeyboardEvent) => {
    if (event.key === key) {
      callback(event);
    }
  };

  // 自动管理生命周期
  onMounted(() => window.addEventListener('keydown', handler));
  onBeforeUnmount(() => window.removeEventListener('keydown', handler));
}




//使用方式

// <!-- 任意组件 -->
// <script setup lang="ts">
// import { useKeyboard } from '@/composables/useKeyboard';

// // 监听 ESC 键
// useKeyboard('Escape', (event) => {
//   console.log('ESC 按下', event);
//   // 执行操作，例如关闭弹窗
// });

// // 监听 Ctrl + S 组合键
// useKeyboard('s', (event) => {
//   if (event.ctrlKey || event.metaKey) { // 兼容 Mac 的 Command 键
//     event.preventDefault();
//     console.log('Ctrl+S 按下');
//     // 执行保存操作
//   }
// });
// </script>